import { useAppDispatch } from "@/store/hooks";
import { addRouteToCache } from "@/store/modules/appSlice";
import { ReactNode, useEffect } from "react";
import { useLocation } from "react-router-dom";

interface PropsInt {
  children: ReactNode;
  loader?: () => any;
}

export default function PrivateRoute(props: PropsInt) {
  const { title, fixed } = props.loader?.() || {};
  const pathname = useLocation().pathname;
  const dispatch = useAppDispatch();

  useEffect(() => {
    const _dispatch = dispatch;
    document.title = title;
    _dispatch(
      addRouteToCache({
        title,
        pathname,
        fixed,
      })
    );
  }, [title, pathname, fixed, dispatch]);

  return <div>{props.children}</div>;
}
